<template>
    <div>
        <div class="search">
            <input type="text" class="search-input"
                   placeholder="输入城市名或拼音"
                   v-model="keyword"
            >
        </div>
        <div class="search-content" ref="search" v-show="keyword">
            <ul>
                <li class="search-item border-bottom" v-for="item of list" :key="item.id" @click="handleCityClick(item.name)">
                    {{item.name}}
                </li>
                <li class="search-item border-bottom" v-show="hasNoData">
                    没有找到匹配数据
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    import Bscroll from 'better-scroll'
    import {  mapMutations} from 'vuex'

    export default {
        name: "CitySearch",
        data(){
            return {
                keyword:'',
                list:[],
                timer:null
            }
        },
        methods:{
           /* handleCityClick(city){
                //  组件发布一个action
                //  this.$store.dispatch('changeCity',city)
                this.$store.commit('changeCity',city);
                //  跳转到跟路由
                this.$router.push('/')
            }*/
            handleCityClick(city) {
                //  组件发布一个action
                //  this.$store.dispatch('changeCity',city)
                //  this.$store.commit('changeCity', city)
                this.changeCity(city);
                this.$router.push('/')
            },
            ...mapMutations(['changeCity'])
        },
        computed:{
            hasNoData(){
                return !this.list.length;
            }
        },
        props:{
            cities:Object.isRequired
        },
        watch:{
            keyword(){
                if(this.timer){
                    clearTimeout(this.timer);
                }
                this.timer = setTimeout(() => {
                    const result = [];
                    if(!this.keyword){
                        this.list = [];
                        return
                    }
                    for (let i in this.cities){
                        this.cities[i].forEach((value) => {
                            if (value.spell.indexOf(this.keyword) > -1 || value.name.indexOf(this.keyword) > -1){
                                result.push(value)
                            }
                        })
                    }
                    this.list = result;

                },100)
            }
        },
        mounted(){
            this.scroll = new Bscroll(this.$refs.search)
        }
    }
</script>

<style lang="stylus" scoped>
    @import "~styles/varibles.styl"
    .search
        height .72rem
        background-color $bgColor
        padding 0 .1rem
        .search-input
            box-sizing border-box
            padding 0 .1rem
            height .62rem
            line-height .62rem
            width 100%
            text-align center
            border-radius .06rem
            color #666
    .search-content
        z-index 1
        overflow hidden
        position absolute
        top 1.59rem
        right 0
        bottom 0
        left 0
        background-color #eee
        .search-item
            line-height .62rem
            padding-left .2rem
            color #666
            background-color #fff
</style>